export default {
  computed: {
    style () {
      return {
        bgColor: this.bgColor,
        textColor: this.textColor
      }
    }
  },

  methods: {
    setStyle () {
      // ::root 表示组件根元素选择器
      const style = `
        ::root {
          background-color: ${this.bgColor};
        }

        ::root > .tw-libname-text {
          color: ${this.textColor};
        }
      `

      this.addStyle(style)
    },

    addStyle (style) {
      this.$el.classList.add(`x${this._uid}`)
      const styleEl = document.getElementById(this._uid) || document.createElement('style')
      styleEl.id = this._uid
      styleEl.innerText = style.replace(/::root/gm, `.x${this._uid}`).replace(/\n/gm, '')

      document.head.appendChild(styleEl)
    }
  },

  mounted () {
    this.setStyle()
  },

  watch: {
    style: {
      deep: true,
      handler () {
        this.setStyle()
      }
    }
  }
}
